<template>
	<view class="address">
		<view class="address-content">
			<view class="add-main">
				<view class="add-main-back">
					<view class="add-li add-li1">
						<text class="add-li-txt">姓名</text>
						<input class="add-li-inp" v-model="name" type="text" value="" placeholder-class="inputplace"
							placeholder="请输入姓名" placeholder-style="color: #bbbbbb" />
					</view>
					<view class="add-li add-li1">
						<text class="add-li-txt">联系方式</text>
						<input class="add-li-inp" v-model="phone" type="text" value="" placeholder-class="inputplace"
							placeholder="请输入电话" placeholder-style="color: #bbbbbb" />
					</view>
					<view class="add-li add-li1" @click="cli_goaddress">
						<text class="add-li-txt">所在地区</text>
						<input class="add-li-inp" v-model="area" disabled=true type="text" value=""
							placeholder-class="inputplace" placeholder="请选择所在地区" placeholder-style="color: #bbbbbb" />
						<!-- <textarea class="add-li-inp" auto-height=true value=""placeholder-class="inputplace" placeholder="请选择您所在的地区"
							v-model="area" disabled=true placeholder-class="add-li-inp2" /> -->
						<image class="add-li-img" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
					</view>
					<view class="add-li add-li3 add-li4">
						<text class="add-li-txt">详细地址</text>
						<!-- <input class="add-li-inp" v-model="address" type="text" value=""placeholder-class="inputplace" placeholder="请输入详细地址" placeholder-style="color: #bbbbbb" /> -->
						<textarea class="add-li-inp" :auto-height='true' value="" v-model="address"
							placeholder-class="inputplace" placeholder="请输入详细地址" placeholder-style="color: #bbbbbb" />
					</view>
				</view>
			</view>
			<view class="add-btn font_blod" :class="{addBtnChan : addBtn}" @click="cli_btn">
				保存地址
			</view>
		</view>

		<!-- <view class="add-btn" v-if="name_address == 0" :class="{addBtnChan : addBtn}" @click="cli_add_edit">
			编辑
		</view> -->
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="add-pop-btm">
				<view class="apb-head">
					<text></text>
					<text class="apb-head-txt">所在地区</text>
					<image class="apb-head-img" src="https://www.zzzsyh.com/applets/agent/agent/close.png" mode="" @click="cli_closePop">
					</image>
				</view>
				<view class="apd-chan">
					<view class="apd-chan-box" v-if="listNum == 2 || listNum == 3 || listNum == 4"
						@click="cli_address_pro">
						<text class="apd-chan-txt">{{pro}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 1}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="listNum == 3 || listNum == 4" @click="cli_address_city">
						<text class="apd-chan-txt">{{city}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 2}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="listNum == 4" @click="cli_address_country">
						<text class="apd-chan-txt">{{country}}</text>
						<!-- <view class="apd-chan-btm" :class="{apdChanBtmColor : colorNum == 3}"></view> -->
					</view>
					<view class="apd-chan-box" v-if="show_title">
						<text class="apd-chan-txt">请选择</text>
						<view class="apd-chan-btm apdChanBtmColor"></view>
					</view>
				</view>
				<view class="apd-li-box">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="apd-li" v-if="listNum == 1" v-for="(item, index) of list_pro" :key="index"
							@click="cli_pop_li1(item, index)">
							<text :class="{apdLiTxt : popImgNum1 == index}">{{item.areaName}}</text>
							<image class="apd-li-img" v-show="popImgNum1 == index" src="../../static/mycenter/15.png"
								mode=""></image>
						</view>
						<view class="apd-li" v-if="listNum == 2" v-for="(item, index) of list_city" :key="index"
							@click="cli_pop_li2(item, index)">
							<text :class="{apdLiTxt : popImgNum2 == index}">{{item.areaName}}</text>
							<image class="apd-li-img" v-show="popImgNum2 == index" src="../../static/mycenter/15.png"
								mode=""></image>
						</view>
						<view class="apd-li" v-if="listNum == 3" v-for="(item, index) of list_country" :key="index"
							@click="cli_pop_li3(item, index)">
							<text :class="{apdLiTxt : popImgNum3 == index}">{{item.areaName}}</text>
							<image class="apd-li-img" v-show="popImgNum3 == index" src="../../static/mycenter/15.png"
								mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				id: '', // 地址的id
				agentId: uni.getStorageSync('agentId'),
				colorNum: 1,
				name_address: '-1',
				show_title: true,
				list: [],
				popImgNum1: -1,
				popImgNum2: -1,
				popImgNum3: -1,
				listNum: 1,
				list_pro: [],
				list_city: [],
				list_country: [],
				area: '',
				pro: '',
				pro_id: '',
				city: '',
				city_id: '',
				country: '',
				country_id: '',
				name: '',
				phone: '',
				address: '',
			}
		},
		onLoad(val) {
			if (val.id) {
				this.id = val.id
			} else {
				this.id = ''
			}
		},
		mounted() {
			this.get_getAreaByPid('', 1)
			// 获取个人地址
			if (this.id) {
				this.get_getUserAddressById(this.id)
			}
		},
		computed: {
			phonechange() {
				var myreg = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;
				let phone = this.phone
				if (myreg.test(phone)) {
					return true
				} else {
					return false
				}
			},
			addBtn() {
				let name = this.name
				let address = this.address
				let area = this.area
				let phonechange = this.phonechange
				var phoneChan = '/^1[123456789]d{9}$/'
				if (name && phonechange && address && area) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			cli_goaddress() {
				this.show_title = true
				this.listNum = 1
				this.popImgNum1 = -1
				this.popImgNum2 = -1
				this.popImgNum3 = -1
				this.$refs.popup.open()
			},
			// 点击关闭弹窗
			cli_closePop() {
				this.$refs.popup.close()
			},
			// 点击所在省市县
			cli_address_pro() {
				this.listNum = 1
			},
			cli_address_city() {
				this.listNum = 2
			},
			cli_address_country() {
				this.cli_address_country = false
				this.listNum = 3
			},
			// 点击地址列表
			cli_pop_li1(item, index) {
				this.popImgNum1 = index
				this.get_getAreaByPid(item.id, 2)
				this.listNum = 2
				this.pro = item.areaName
				this.pro_id = item.id
			},
			cli_pop_li2(item, index) {
				this.popImgNum2 = index
				this.get_getAreaByPid(item.id, 3)
				this.listNum = 3
				this.city = item.areaName
				this.city_id = item.id
			},
			cli_pop_li3(item, index) {
				this.popImgNum3 = index
				this.listNum = 4
				this.show_title = false
				this.country = item.areaName
				this.country_id = item.id
				this.$refs.popup.close()
				this.area = this.pro + this.city + this.country
			},
			cli_btn() {
				let id = this.id
				if (id) {
					this.updateAgentAddress()
				} else {
					this.cli_add_edit()
				}
			},
			// 点击新增编辑地址
			cli_add_edit() {
				console.log('点击了编辑地址');
				let addBtn = this.addBtn
				let name = this.name
				let phone = this.phone
				let pCode = this.pro_id
				let pName = this.pro
				let cCode = this.city_id
				let cName = this.city
				let aCode = this.country_id
				let aName = this.country
				let address = this.address
				if (addBtn) {
					uni.request({
						url: allapi.saveAgentAddress,
						data: {
							agentId: this.agentId,
							name: name,
							phone: phone,
							pCode: pCode,
							pName: pName,
							cCode: cCode,
							cName: cName,
							aCode: aCode,
							aName: aName,
							address: address
						},
						success: (res) => {
							console.log(res);
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
							if (res.data.code == 0) {
								console.log('成功了');
								setTimeout(function() {
									uni.navigateBack()
								}, 1000)
							}
						}
					})
				}
			},
			updateAgentAddress() {
				console.log('点击了编辑地址');
				let addBtn = this.addBtn
				let name = this.name
				let phone = this.phone
				let pCode = this.pro_id
				let pName = this.pro
				let cCode = this.city_id
				let cName = this.city
				let aCode = this.country_id
				let aName = this.country
				let address = this.address
				if (addBtn) {
					uni.request({
						url: allapi.updateAgentAddress,
						data: {
							id: this.id,
							name: name,
							phone: phone,
							pCode: pCode,
							pName: pName,
							cCode: cCode,
							cName: cName,
							aCode: aCode,
							aName: aName,
							address: address
						},
						success: (res) => {
							console.log(res);
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
							if (res.data.code == 0) {
								console.log('成功了');
								setTimeout(function() {
									uni.navigateBack()
								}, 1000)
							}
						}
					})
				}
			},
			// 获取地址信息
			get_getAreaByPid(pid, num) {
				let _that = this
				uni.request({
					url: allapi.getAreaByPid,
					data: {
						pid: pid
					},
					success: (res) => {
						let dat = res.data.data
						// console.log(dat);
						if (num == 1) {
							_that.list_pro = dat
						} else if (num == 2) {
							_that.list_city = dat
						} else if (num == 3) {
							_that.list_country = dat
						}
					}
				})
			},
			// 获取我的地址信息
			get_getUserAddressById(id) {
				let _that = this
				uni.request({
					url: allapi.getAgentAddressById,
					data: {
						id: id
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data

						_that.area = dat.addressPrivinceName + dat.addressCityName + dat.addressDistrictName
						_that.pro = dat.addressPrivinceName
						_that.pro_id = dat.addressProvince
						_that.city = dat.addressCityName
						_that.city_id = dat.addressCity
						_that.country = dat.addressDistrictName
						_that.country_id = dat.addressDistrict
						_that.name = dat.addressName
						_that.phone = dat.addressPhone
						_that.address = dat.addressDetail
						// if (dat) {
						// 	// _that.name_address = '0'

						// }else {
						// 	_that.name_address = '1'
						// }
					}
				})
			}
		}
	}
</script>

<style scoped>
	.scroll-Y {
		height: 100%;
	}

	.address {
		width: 100%;
		height: 100%;
		position: absolute;
		background: #F7F7F7;
	}

	.address-content {
		display: flex;
		flex-direction: column;
		height: 100%;

	}

	.add-main {
		flex: 1;
	}

	.add-main-back {
		background: #FFFFFF;
	}

	.add-li {
		margin: 0 19px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.add-li1 {
		min-height: 96rpx;
	}

	.add-li2 {
		min-height: 55px;
	}

	.add-li3 {
		border: none;
	}

	.add-li4 {
		align-items: flex-start;
		padding: 30rpx 0;
	}

	.add-li-txt {
		font-size: 28rpx;
		color: #666666;
		width: 80px;
	}

	.add-li-inp {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
	}

	/deep/.add-li-inp2 {
		color: #999999 !important;
	}

	.add-li-img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 32rpx;
	}

	.add-btn {
		height: 92rpx;
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
		border-radius: 46rpx;
		opacity: 0.5;
		margin: 0 24rpx 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-top: 6px;
		letter-spacing: 1px;
		margin-bottom: calc(env(safe-area-inset-bottom) + 24rpx);

	}

	.addBtnChan {
		opacity: 1;
	}

	.add-pop-btm {
		width: 100%;
		height: 960rpx;
		background: #fff;
		border-top-right-radius: 24rpx;
		border-top-left-radius: 24rpx;
	}

	.apb-head {
		height: 92rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin: 0 24rpx;
	}

	.apb-head-txt {
		color: #333333;
		font-size: 30rpx;
	}

	.apb-head-img {
		width: 48rpx;
		height: 48rpx;
	}

	.apd-chan {
		height: 96rpx;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #333333;
		padding: 0 24rpx;
		border-top: 2rpx solid #DDDDDD;
		border-bottom: 2rpx solid #DDDDDD;
	}

	.apd-chan-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 48rpx;
	}

	.apd-chan-txt {
		height: 56rpx;
		line-height: 56rpx;
		margin-bottom: 6rpx;
	}

	.apd-chan-btm {
		width: 56rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
	}

	.apdChanBtmColor {
		background: #F76B1F !important;
	}

	.apd-li-box {
		padding: 20rpx 24rpx;
		overflow: auto;
		height: 620rpx;
	}

	.apd-li {
		height: 80rpx;
		color: #333333;
		line-height: 80rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.apdLiTxt {
		color: #F76B1F !important;
	}

	.apd-li-img {
		width: 40rpx;
		height: 30rpx;
	}
</style>
